import { targetSubmit } from '@/services/api/api-analysis';
import { TinyArea } from '@ant-design/charts';
import { ClockCircleOutlined, EllipsisOutlined, SmallDashOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { TableDropdown } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Divider, Dropdown, MenuProps, Radio, Skeleton, Space, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TargetTopicSubmitCardProps { }

const TargetTopicSubmitCard: React.FC<TargetTopicSubmitCardProps> = ({ }) => {
    const [dataTargetSubmit, setDataTargetSubmitState] =
        useState<AnalysisData.TargetSubmit>();
    const [loading, setLoading] = useState(false);
    const { initialState } = useModel('@@initialState');
    const { currentUser } = initialState || {};

    const [dataTabSelectDay, setDataTabSelectDayState] = useState<number>(60);

    const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
        loadTargetSubmitData(60)
        setDataTabSelectDayState(60)
    };

    const handleMenuClick: MenuProps['onClick'] = (e) => {
        setLoading(true)
        loadTargetSubmitData(Number(e.key))
        setDataTabSelectDayState(Number(e.key))
    };

    const items: MenuProps['items'] = [
        {
            label: '7天',
            key: '7',
            icon: <ClockCircleOutlined />,
        },
        {
            label: '本月',
            key: ' ',
            icon: <ClockCircleOutlined />,
        },
        {
            label: '90天',
            key: '90',
            icon: <ClockCircleOutlined />,
        },
    ];

    const menuProps = {
        items,
        onClick: handleMenuClick,
    };

    /**
     * 宣传刊播
     * @param key
     */
    const loadTargetSubmitData = async (day: number) => {
        try {
            const response = await targetSubmit({ day: -day });
            if (response.code === 0) {
                setDataTargetSubmitState(response.data);
            }
            setLoading(false)
        } catch (error) { }
    };
    useEffect(() => {
        loadTargetSubmitData(dataTabSelectDay);
    }, []);

    return (
        <>
            {dataTargetSubmit ? (
                <Spin spinning={loading}>
                    <StatisticCard
                        title="选题报送"
                        extra={<>
                            <Dropdown.Button menu={menuProps} onClick={handleButtonClick} >
                                60天
                            </Dropdown.Button>
                        </>}
                        style={{ backgroundColor: '#F6F7FB' }}
                        chart={
                            <>
                                <div >
                                    <h2 >线索 {dataTargetSubmit?.countSubmit} 条</h2>
                                </div>
                                <TinyArea
                                    height={46}
                                    autoFit={true}
                                    smooth
                                    areaStyle={{
                                        fill: 'l(270) 0:rgb(151 95 228 / 10%) 0.5:rgb(151 95 228 / 60%) 1:rgb(151 95 228)',
                                    }}
                                    line={{
                                        color: '#975FE4',
                                    }}

                                    tooltip={{
                                        customContent: (x, data) => {
                                            if (x != null) {
                                                return `${dataTargetSubmit?.trendSubmits[x]?.label}: ${data[0].value}`;
                                            } else {
                                                return '';
                                            }
                                        },
                                    }}
                                    data={dataTargetSubmit?.trendSubmits.map((item) => item.value)}
                                />
                                <Divider />
                                <Space>
                                    <StatisticCard.Statistic
                                        title="周同比"
                                        value={Math.abs(dataTargetSubmit?.weekTrendCount) + ' '}
                                        trend={dataTargetSubmit?.weekTrendCount > 0 ? 'up' : 'down'}
                                    />
                                    <StatisticCard.Statistic
                                        title="月同比"
                                        value={Math.abs(dataTargetSubmit?.monthTrendCount) + ' '}
                                        trend={dataTargetSubmit.monthTrendCount > 0 ? 'up' : 'down'}
                                    />
                                </Space>
                            </>
                        }
                    /></Spin>
            ) : (
                <StatisticCard title="线索报送" extra={<EllipsisOutlined />}>
                    <Skeleton active />
                </StatisticCard>
            )}
        </>
    );
};

export default TargetTopicSubmitCard;
